<script setup>
import DetailPanel from '@/components/detail-panel/detail-panel.vue'

import { storeToRefs } from 'pinia'
import useDetailStore from '@/stores/modules/detail'

const detailStore = useDetailStore()
const { getNotice } = storeToRefs(detailStore)
</script>

<template>
  <div class="detail-notice">
    <DetailPanel title="预定须知" :is-bottom="true">
      <div class="notice-inner">
        <template v-for="(item, index) in getNotice" :key="index">
          <div class="item">
            <span class="title">{{ item.title }}</span>
            <span class="intro">{{ item.introduction }}</span>
            <span class="tip" v-if="item.tips">查看说明</span>
          </div>
        </template>
      </div>
    </DetailPanel>
  </div>
</template>

<style lang="less" scoped>
.detail-notice {
  .notice-inner {
    .item {
      display: flex;
      margin: 10px 0 20px;
      font-size: 12px;

      .title {
        width: 64px;
        color: #666;
      }

      .intro {
        flex: 1;
        color: #333;
      }
    }
  }
}
</style>
